<template>
	<view>
		<!-- components/goods/index.wxml -->
		<!-- 列表 -->
		<view class="list">
			<!-- 左边 -->
			<view class="left" :style="'padding-bottom:' + pbottom">
				<view class="list-info" @tap="goodsDetail" :data-goods_id="item.goods_id" v-if="index % 2 != 1"
					v-for="(item, index) in goodsListClone" :key="index">
					<view class="list-info-img" :id="'list-info-img' + index">
						<image :src="item.goods_img + '?x-oss-process=image/resize,w_320'" mode="widthFix"
							@load="list_sort" :data-index="index"></image>
					</view>

					<view class="list-info-detail">
						<view class="list-info-detail-title">
							{{ item.goods_title }}
						</view>
						<view class="detail-tip" v-if="item.goods_tag">
							<view class="tip-span" v-if="item.goods_tag">{{ item.goods_tag }}</view>
							<view class="clear"></view>
						</view>
						<view>
							<view class="list-info-detail-price">
								<view class="list-info-detail-price-discounts" v-if="businessClone == 1">
									¥{{ item.goods_min_price }}
									<span>/{{ item.goods_min_unit }}</span>
								<!-- <span class="price-discounts-bean" v-if="bean=='bean'">（{{parseInt(item.goods_min_price)}}
									趣豆）</span> -->
								</view>
								<view class="list-info-detail-price-discounts" v-else>认证查看价格</view>
								<!-- <view class="list-info-detail-price-original">{{item.goods_min_market_price}}</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right" :style="'padding-bottom:' + pbottom">
				<view class="list-info" @tap="goodsDetail" :data-goods_id="item.goods_id" v-if="index % 2 == 1"
					v-for="(item, index) in goodsListClone" :key="index">
					<view class="list-info-collect" v-if="false">
						<image :src="imgUrl + (item.is_collect ? '/imgs/then-collect.png' : '/imgs/not-collect.png')">
						</image>
					</view>

					<view class="list-info-img" :id="'list-info-img' + index">
						<image :src="item.goods_img + '?x-oss-process=image/resize,w_320'" mode="widthFix"
							@load="list_sort" :data-index="index"></image>
					</view>

					<view class="list-info-detail">
						<view class="list-info-detail-title">
							{{ item.goods_title }}
						</view>
						<view class="detail-tip" v-if="item.goods_tag">
							<view class="tip-span" v-if="item.goods_tag">{{ item.goods_tag }}</view>
							<view class="clear"></view>
						</view>
						<view>
							<view class="list-info-detail-price">
								<view class="list-info-detail-price-discounts" v-if="businessClone == 1">
									¥{{ item.goods_min_price }}
									<span>/{{ item.goods_min_unit }}</span>
								<!-- 	<span class="price-discounts-bean" v-if="bean=='bean'">（{{parseInt(item.goods_min_price)}}
										趣豆）</span> -->
								</view>
								<view class="list-info-detail-price-discounts" v-else>认证查看价格</view>
								<!-- <view class="list-info-detail-price-original">{{item.goods_min_market_price}}</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-end" v-if="isEnd == 'end'">已经到底啦</view>
	</view>
</template>

<script>
	// components/goods/index.js
	const Config = require('../../config/index.js');

	export default {
		data() {
			return {
				//图片url
				imgUrl: Config.imgUrl,

				goodsListClone: [],
				businessClone: 1
			};
		}
		/**
		 * 组件的属性列表
		 */
		,
		props: {
			goodsList: {
				// 商品数据
				type: Array,
				default: () => []
			},
			bean: {
				//是否代理商
				type: String,
				default: ""
			},
			//数据是否加载完成
			isEnd: {
				type: String,
				default: 'start'
			},
			pbottom: {
				type: String,
				default: '100rpx'
			},
			// business: {
			// 	type: Int16Array,
			// 	default: 1
			// }
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			list_sort: function(e) {
				//数据重新排序
				var index = e.currentTarget.dataset.index; //下标

				var json = this.goodsList; //数据

				if (index == json.length - 1) {
					//最后在排序
					this.if_sort();
				}
			},

			if_sort() {
				//判断排序
				var json = this.goodsList; //数据

				const query = uni.createSelectorQuery().in(this);

				const _this = this; //获取图片高度

				for (var i = 0; i < json.length; i++) {
					query.select('#list-info-img' + i).boundingClientRect();
				}

				query.exec(function(res) {
					for (var i = 0; i < json.length; i++) {
						json[i].imgHeight = res[i].height;
					}
					_this.setData({
						goodsListClone: json
					});

					_this.confirm_sort();
				});
			},

			confirm_sort() {
				//确认排序
				var json = this.goodsList;
				var leftHeight = 0;
				var rightHeight = 0;

				for (var i = 0; i < json.length; i++) {
					if ((i + 3) % 2 == 1) {
						leftHeight += json[i].imgHeight;
					} else {
						leftHeight += 0;
					}

					if ((i + 3) % 2 == 0) {
						rightHeight += json[i].imgHeight;
					} else {
						rightHeight += 0;
					}

					if ((i + 3) % 2 == 1) {
						json[i].list_position = 'left';
					} else {
						json[i].list_position = 'right';
					}

					if (json[i].list_position == 'left') {
						//左边
						if (leftHeight > rightHeight && leftHeight && rightHeight) {
							// 左边大于右边-分配右边
							json[i].list_position = 'right';
							leftHeight -= json[i].imgHeight;
							rightHeight += json[i].imgHeight;
						}
					}

					if (json[i].list_position == 'right') {
						//左边
						if (rightHeight > leftHeight && leftHeight && rightHeight) {
							//右边大于左边-分配左边
							json[i].list_position = 'left';
							rightHeight -= json[i].imgHeight;
							leftHeight += json[i].imgHeight;
						}
					}
				}

				this.setData({
					goodsListClone: json
				});
			},

			goodsDetail(e) {
				console.log(this.bean);
				// 商品详情
				if (this.bean == 'bean'||this.bean=='gift') {
					//趣豆商城
					uni.navigateTo({
						url: '/pages/goodsDetail/index?id=' + e.currentTarget.dataset.goods_id + '&bean='+this.bean
					});
				} else {
					uni.navigateTo({
						url: '/pages/goodsDetail/index?id=' + e.currentTarget.dataset.goods_id
					});
				}
			}
		},
		watch: {
			goodsList: {
				handler: function(newVal, oldVal) {
					this.goodsListClone = newVal;
				},
				immediate: true,
				deep: true
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
